<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="110px" label-position="right">
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="工厂货号" prop="factory_number">
                        <el-select v-model="form.factory_number"  filterable style="width: 100%" placeholder="请选择" clearable disabled>
                            <el-option v-for="item in goodsList" :key="item.id" :label="item.factory_number" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="批次号" prop="batch_number">
                        <el-input v-model="form.batch_number" placeholder="请输入批次号" clearable readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="首单/加单" prop="type">
                        <el-select v-model="form.type" placeholder="请选择首单/加单" style="width:100%" disabled>
                            <el-option label="首单" :value="1"></el-option>
                            <el-option label="加单" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1" >
                <el-col :span="8">
                    <el-form-item label="客户" prop="client_id">
                        <el-select v-model="form.client_id"  filterable style="width: 100%" placeholder="请选择客户" @change="clientChange">
                            <el-option v-for="item in customList" :key="item.custom_id" :label="item.referred_as" :value="item.custom_id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="SKC" prop="skc">
                        <el-input v-model="form.skc" placeholder="请输入SKC" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="品牌" prop="brand_id">
                        <el-select v-model="form.brand_id"  filterable style="width: 100%" placeholder="请选择品牌" disabled>
                            <el-option v-for="item in PingList" :key="item.id" :label="item.brand_name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1" >
                <el-col :span="8">
                    <el-form-item label="商品类别" prop="goods_cate">
                        <el-select v-model="form.goods_cate"  filterable style="width: 100%" placeholder="请选择商品类别" disabled>
                            <el-option v-for="item in typeList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="成分" prop="component">
                        <el-select v-model="form.component" filterable placeholder="请选择商品类别" style="width:100%" disabled >
                            <el-option v-for="item in componentList" :key="item.id" :label="item.component_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1" >
                <el-col :span="8">
                    <el-form-item label="子订单号" prop="order_no">
                        <el-input v-model="form.order_no" placeholder="请输入子订单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工厂" prop="supplier_id">
                        <el-select v-model="form.supplier_id"  filterable style="width: 100%" placeholder="请选择工厂" clearable disabled>
                            <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="紧急" prop="order_label">
                        <el-switch v-model="form.order_label" :active-value="1" :inactive-value="0" ></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="订单交期" prop="deliver_time">
                        <el-date-picker v-model="form.deliver_time" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择订单交期" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工厂价格" prop="factory_money">
                        <el-input v-model="form.factory_money" placeholder="请输入工厂价格" clearable readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-col>
                <sc-form-table ref="table" v-model="form.size_data" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd show-summary :summary-method="getSummaries">
                    <el-table-column prop="size" label="尺码" width="150" fixed></el-table-column>
                    <el-table-column prop="num" label="未分单数量" width="150" fixed></el-table-column>
                    <el-table-column align="center" v-for="(child,index) in location" :key="index" :label="child.date + '订单' " prop="order" width="150">
                        <template #default="scope">
                            <div v-if="scope.row.order">
                                {{scope.row.order[child.order_no]}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="分单数量" width="150" prop="split_num">
                        <template #default="scope">
                            <el-input v-model="scope.row.split_num" @input="input(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                </sc-form-table>
            </el-col>
        </el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '添加子订单',
				edit: '编辑子订单',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
            form: {
                id:"",
                order_no:"",
                order_no_arr:[],
                supplier_id:"",
                factory_number:"",
                factory_money:"",
                batch_number:"",
                type:"",
                client_id:"",
                skc:"",
                brand_id:"",
                goods_cate:"",
                component:"",
                deliver_time:"",
                master_order_no:"",
                order_label:0,
                size_data:[],
            },
            factory_number:"",
            //验证规则
            rules: {
                order_no: [
                    {required: true, message: '请输入订单号'}
                ],
                factory_money: [
                    {required: true, message: '请输入工厂价格'}
                ],
                client_id: [
                    {required: true, message: '请选择客户'}
                ],
            },
            addTemplate:{
                size:"",
                num:""
            },
            PingList:[],
            customList:[],
            typeList:[],
            applyList: [],
            goodsList:[],
            componentList:[],//成分
            location:[],
            lastNumber:0,
            bian:[]
		}
	},
	mounted() {
        this.getPing()
        this.getType()
        this.getApply()
        this.getGoodsNumList()
        this.getComponent()
    },
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
            if (valid) {
                this.isSaveing = true;
                var res = [];
                res = await this.$API.order.getOrder.addChild.post(this.form);
                if (res.code == 1) {
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$message.success("操作成功")
                } else {
                    this.$alert(res.message, "提示", { type: 'error' })
                    this.isSaveing = false;
                }
                } else {
                    return false;
                }
            })
		},
        //表单注入数据
		async setData(data) {
            console.log('data :>> ', data);
            this.form.order_no_arr = data
            let arr = data
            var request = await this.$API.order.getOrder.getChildNumber.get({order_no_arr:arr});
            var res = await this.$API.goods.getGoods.detail.get({id:request.data.info.goods_id});
            res.data.customList.map(item=>{
                this.customList.push({
                    custom_id:item.custom_id,
                    apply_name:item.apply_name,
                    skc:item.skc,
                    cate_id:res.data.cate_id,
                    brand_id:item.brand_id,
                    component:Number(res.data.component),
                    deliver_time:item.delivery_time,
	                referred_as:item.referred_as
                })
            })
            this.form.factory_number = request.data.info.factory_number
            this.form.batch_number = request.data.info.batch_number
            this.form.type = request.data.info.type
            this.form.component = Number(request.data.info.component)
            this.form.goods_cate = request.data.info.goods_cate
            this.form.client_id = request.data.info.client_id
            this.form.factory_money = res.data.selling_price
            this.form.supplier_id = request.data.info.supplier_id
            this.form.deliver_time = request.data.info.deliver_time
            this.form.skc = request.data.info.skc
            request.data.header.map(item=>{
                this.location.push({
                    date:item.date,
                    order_no:item.order_no,
                 })
            })
            request.data.list.map(item=>{
                this.form.size_data.push({
                    size:item.size,
                    num:item.total_num,
                    order:item.order
                })
            })
            this.bian = []
            this.location.map(item=>{
                let liang = 0
                this.form.size_data.map(item1=>{
                    if(item1.order[item.order_no]){
                        liang = item1.order[item.order_no] + liang
                    }
                })
                this.bian.push(liang)
            })
            this.bian.push(0)
		},
        // 所有品牌
        async getPing(){
            var res = await this.$API.all.brand.get();
            this.PingList = res.data;
        },
        // 所有类别
        async getType(){
            var res = await this.$API.all.type.get();
            this.typeList = res.data;
        },
        // 获取工厂
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.applyList = res.data;
        },
        // 所有成分
        async getComponent(){
            var res = await this.$API.all.component.get();
            // this.componentList = res.data;
            let array = []
            res.data.map(item=>{
                array.push({
                    id:item.id,
                    component_name: item.component_detail != "" ? item.component_detail + " + " + item.component_name : item.component_name
                })
            })
            this.componentList = array
        },
        // 获取工厂货号
        async getGoodsNumList(){
            var res = await this.$API.all.goodsNumber.get();
            this.goodsList = res.data;
        },
        clientChange(e){
            this.customList.map(item=>{
                if(e==item.custom_id){
                    this.form.skc = item.skc
                    this.form.brand_id = item.brand_id
                    this.form.goods_cate = item.cate_id
                    this.form.deliver_time = item.deliver_time
                }
            })
        },
        input(row){
            if(row.split_num>row.num){
                row.split_num=row.num
                this.$alert("超过最多可分单数", "提示", { type: 'error' })
            }
            this.lastNumber = 0
            this.form.size_data.map(item=>{
                if(item.split_num!=undefined){
                    this.lastNumber = Number(item.split_num) + this.lastNumber
                }
            })
            this.bian.splice(this.bian.length-1,1,this.lastNumber)
        },
        getSummaries(param){
            const { columns, data } = param
            var sums = []
            columns.forEach((column, index) => {
                sums[index] = 0
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }
                if (index === 1) {
                    sums[index] = ''
                    return
                }
                if(column.property != undefined){
                    data.map((item) => {
                        sums[index] += item[column.property]
                    })
                }
                if(index >=3 && index <=(this.bian.length + 3)){
                    sums[index] = this.bian[index-3]
                    return
                }
            })
            return sums
        },
	}
}
</script>

<style>
.table .selected-row {
  background-color: #F00;
  /* 或者其他样式 */
}
</style>
